import React from 'react';
import { Table, Tag } from 'antd';
import styled from 'styled-components'
import { getPageData, getDeleteScore } from '@/api/index'

const ScoreWrapper = styled.div`
  width: calc(100vw - 100px);
  margin: 0 auto;
`;

const columns = [
  {
    title: '名字',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
  },
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '理论',
    dataIndex: 'theory',
    key: 'theory',
  },
  {
    title: '技能',
    dataIndex: 'skill',
    key: 'skill',
  },
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <span>
        {console.log(record.stuId, 'record---------record')}
        <a style={{ marginRight: 16 }}
          onClick={() => console.log('编辑')}
        >编辑</a>
        <a onClick={() => {
          getDeleteScore({ stuId: record.stuId }).then(res => {
            console.log(res, 'res')
          })
        }}>删除</a>
      </span>
    ),
  },
];
class MyTable extends React.Component {
  state = {
    data: [],
    pagination: {},
    loading: false,
  }

  render() {
    return (
      <ScoreWrapper>
        <Table
          columns={columns}
          dataSource={this.state.data}
          loading={this.state.loading}
          pagination={this.state.pagination}
          onChange={this.handleTableChange}
        />
      </ScoreWrapper>
    )
  }

  componentDidMount() {

    this.fetch();
  }

  // 请求数据函数
  fetch = (params = {}) => {
    // console.log('params:', params);
    this.setState({ loading: true });
    // 分页请求数据
    getPageData({
      size: 5,
      ...params,
    }).then(res => {
      // pagination.total = 200;
      console.log(res, 'res')
      if (res.data && res.data.length) {
        const pagination = { ...this.state.pagination };
        pagination.total = res.totalCount;
        console.log(res, 'res--------返回分页结果')
        res.data.forEach((item, index) => {
          item.key = item.id
        })
        console.log(pagination, 'pagination')
        this.setState({
          loading: false,
          data: res.data,
          pagination,
        });
      }
    })
  };

  handleTableChange = (pagination, filters, sorter) => {
    const pager = { ...this.state.pagination };
    // console.log(pager, 'pager')
    // 当前的页码
    pager.page = pagination.current;
    // 更新参数
    this.setState({
      pagination: pager,
    });
    // {current: 2, pageSize: 10, total: 39}
    // console.log(pagination, '----featch-------fetch')
    // 重新请求数据
    this.fetch({
      size: 5,
      page: pagination.current,
    })
  };

}


export default MyTable;